<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新增账单</title>
	<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
	<script src="js/vue.js"></script>
	<script src="element-ui/lib/index.js"></script>
	<script src="js/axios-0.18.0.js"></script>
	<script src="js/server.js"></script>
	<style>
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 78px;
			height: 78px;
			line-height: 78px;
			text-align: center;
		}
		.avatar {
			width: 78px;
			height: 78px;
			display: block;
		}
	</style>
</head>
<body>
<div id="div">
	<h4>新增账单</h4>
	<el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px" class="demo-ruleForm">
		<el-form-item label="账单编码" prop="billCode">
			<el-input v-model="addForm.billCode"></el-input>
		</el-form-item>
		<el-form-item label="商品名称" prop="productName">
			<el-input v-model="addForm.productName"></el-input>
		</el-form-item>
		<el-form-item label="商品描述" prop="productDesc">
			<el-input type="textarea" v-model="addForm.productDesc"></el-input>
		</el-form-item>
		<el-form-item label="商品数量" prop="productCount">
			<el-input v-model.number="addForm.productCount" type="number" min="1"></el-input>
		</el-form-item>
		<el-form-item label="商品单位" prop="productUnit">
			<el-select v-model="addForm.productUnit" placeholder="请选择" required>
				<el-option
						v-for="item in productUnitList"
						:key="item"
						:label="item"
						:value="item">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="商品总额" prop="totalPrice">
			<el-input v-model.number="addForm.totalPrice" type="number" min="0.01" step="0.01"></el-input>
		</el-form-item>
		<el-form-item label="是否支付" prop="isPayment">
			<el-radio v-model="addForm.isPayment" label="1">未支付</el-radio>
			<el-radio v-model="addForm.isPayment" label="2">已支付</el-radio>
		</el-form-item>
		<el-form-item label="供应商" prop="providerId">
			<el-select v-model="addForm.providerId" placeholder="请选择" required>
				<el-option
						v-for="item in providerList"
						:key="item.id"
						:label="item.proName"
						:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="submitForm('addForm')">保存</el-button>
			<el-button @click="resetForm('addForm')">清空</el-button>
		</el-form-item>
	</el-form>
</div>
</body>
<script type="application/javascript">
	new Vue({
		el: '#div',
		data: {
			addForm: {
				isPayment: '1',
				productUnit: ''
			},
			productUnitList: ['瓶', '块', '斤', '袋', '个'],
			providerList: [],
			rules: {
				billCode: [{
					required: true,
					message: '请输入账单编码',
					trigger: 'blur'
				}, {
					validator: function(rule, value, callback) {
						if (!value) {
							callback();
							return;
						}
						axios.get(server_url + "/api/bill/checkCode", {
							params: { billCode: value }
						}).then(resp => {
							if (resp.data.code === 0) {
								callback();
							} else {
								callback(new Error(resp.data.msg || '账单编码已存在'));
							}
						}).catch(err => {
							console.log('验证请求失败:', err);
							callback(new Error('验证失败，请稍后重试'));
						});
					},
					trigger: 'blur'
				}],
				productName: [{
					required: true,
					message: '请输入商品名称',
					trigger: 'blur'
				}],
				productCount: [{
					required: true,
					message: '请输入商品数量',
					trigger: 'blur'
				}, {
					validator: (rule, value, callback) => {
						const num = Number(value);
						if (isNaN(num) || num <= 0) {
							callback(new Error('商品数量必须大于0'));
						} else if (!Number.isInteger(num)) {
							callback(new Error('商品数量必须是整数'));
						} else {
							callback();
						}
					},
					trigger: 'blur'
				}],
				productUnit: [{
					required: true,
					message: '请选择商品单位',
					trigger: 'change'
				}],
				totalPrice: [{
					required: true,
					message: '请输入商品总额',
					trigger: 'blur'
				}, {
					validator: (rule, value, callback) => {
						const num = Number(value);
						if (isNaN(num) || num <= 0) {
							callback(new Error('商品总额必须大于0'));
						} else {
							callback();
						}
					},
					trigger: 'blur'
				}],
				providerId: [{
					required: true,
					message: '请选择供应商',
					trigger: 'change'
				}]
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// 确保发送的数据是数字类型
						const formData = {
							...this.addForm,
							productCount: Number(this.addForm.productCount),
							totalPrice: Number(this.addForm.totalPrice)
						};

						axios.post(
								server_url + "/api/bill",
								formData,
								{
									headers: {
										'Content-Type': 'application/json'
									}
								}
						).then(resp => {
							if (resp.data.code === 0) {
								this.$message.success(resp.data.msg || '添加成功');
								this.resetForm(formName);
							} else {
								this.$message.error(resp.data.msg || '添加失败');
							}
						}).catch(err => {
							console.log(err);
							this.$message.error('提交失败，请稍后重试');
						});
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.addForm.isPayment = '1';
				this.addForm.productUnit = '';
			},
			getProviderList() {
				axios.get(server_url + "/api/provider")
						.then(resp => {
							if (resp.data.code === 0) {
								this.providerList = resp.data.data;
							} else {
								this.$message.error(resp.data.msg || '获取供应商列表失败');
							}
						}).catch(err => {
					console.log(err);
					this.$message.error('获取供应商列表失败，请稍后重试');
				});
			}
		},
		mounted() {
			this.getProviderList();
		}
	});
</script>
</html>